<template>
  <section>
    <hr />
    <b-pagination
      :total="total"
      :current.sync="current"
      :range-before="rangeBefore"
      :range-after="rangeAfter"
      :order="order"
      :size="size"
      :simple="isSimple"
      :rounded="isRounded"
      :per-page="perPage"
      :icon-prev="prevIcon"
      :icon-next="nextIcon"
      @change="change"
      aria-next-label="Next page"
      aria-previous-label="Previous page"
      aria-page-label="Page"
      aria-current-label="Current page"
    ></b-pagination>
  </section>
</template>

<script>
export default {
  data() {
    return {
      total: 25,
      current: 1,
      perPage: 2,
      rangeBefore: 3,
      rangeAfter: 1,
      order: "",
      size: "",
      isSimple: false,
      isRounded: false,
      prevIcon: "chevron-left",
      nextIcon: "chevron-right"
    };
  },
  mounted() {
    this.total = this.$store.state.totalElements;
  },
  methods: {
    change(number) {
      this.$store.dispatch("changepage", number);
    }
  }
};
</script>